<template>
  <view 
    class="svg-icon" 
    :style="{ 
      width: size + 'rpx', 
      height: size + 'rpx'
    }"
    @click="handleClick"
  >
    <image  class="svg-icon-image"
      :src="`/static/svgIcon/${name}.svg`" 
      :style="{ 
        width: size + 'rpx', 
        height: size + 'rpx'
      }"
      mode="aspectFit"
    />
  </view>
</template>

<script setup>
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: 24
  },
  color: {
    type: String,
    default: '#333'
  }
})

const emit = defineEmits(['click'])

const handleClick = (event) => {
  emit('click', event)
}
</script>

<style lang="scss" scoped>
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
  .svg-icon-image {
    display: block;
  }
}
</style> 